<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框操作</title>

    <style>

    </style>
</head>
<body>
    <table border="1px" align="center" width="500px">
        <caption>学生信息表</caption>
        <tr>
            <td><input type="checkbox" id="ck" onclick="fun1()"/></td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>操作</td>
        </tr>
        <!--数据部分-->
        <tr>
            <td><input type="checkbox" class="cks" value="1"/></td>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
            <td><a>删除</a></td>
        </tr>

        <tr>
            <td><input type="checkbox" class="cks" value="2"/></td>
            <td>李四</td>
            <td>24</td>
            <td>男</td>
            <td><a>删除</a></td>
        </tr>

        <tr>
            <td>
                <a href="javaScript:fun2();">反选</a>
                <a href="javaScript:fun3();">获取选中复选框的值</a>
            </td>
        </tr>
    </table>
</body>
<script>
    /*
        一个复选框控制以下的复选框
    */
    //一、添加功能
    function fun1() {
        //主复选框
        let ck = document.getElementById("ck");
        //复选框的状态
        // alert(ck.checked);
        //获取另外两个复选框
        let cks = document.getElementsByClassName("cks");
        //cks复选框的个数(长度)
        // alert(cks.length);
        //遍历cks复选框
        for (let i = 0; i < cks.length; i++){
            cks[i].checked = ck.checked;
        }
    }
    /*
         实现复选框的反选操作
    */
    function fun2() {
        //获取两个复选框
        let cks = document.getElementsByClassName("cks");
        //遍历cks复选框
        for (let i = 0; i < cks.length; i++){
            cks[i].checked = !cks[i].checked;
        }
    }
    /*
        获取选中复选框的值
     */
    function fun3(){
        //获取两个复选框
        let cks = document.getElementsByClassName("cks");
        //定义一个数组用来接收选中的数据
        let arr = new Array();
        //遍历cks复选框
        for (let i = 0; i < cks.length; i++){
            //判断复选框是否被选中，选中则获取值
            if (cks[i].checked){
                // arr[i] = cks[i].value;
                //使用压栈给数组添加元素
                arr.push(cks[i].value);
            }
        }
        alert(arr);
    }
</script>
</html>